<template>
	<!-- 联系人 -->
	<view class="content qxlj_back4">
		<view class="row b-b-b">
			<!-- <text class="tit">{{$t('contact.contactName')}}</text> -->
			<!-- <input class="input" type="text" v-model="personData.Name" :placeholder="$t('contact.contactNameContactPlaceholder')" placeholder-class="placeholder" /> -->
			<text class="tit">{{ title }}</text>
			<input class="input" type="text" v-model="personData.Name" :placeholder="`${title}姓名`" placeholder-class="placeholder" />
		</view>
		<view class="line">
					 <view class="shortLine"></view>
		</view>
		<view class="row b-b">
			<text class="tit">{{$t('contact.mobile')}}</text>
			<!-- <input class="input" type="number" v-model="personData.Mobile" :placeholder="$t('contact.mobileContactPlaceholder')" placeholder-class="placeholder" /> -->
			<input class="input" type="number" v-model="personData.Mobile" :placeholder="`${title}手机号码`" placeholder-class="placeholder" />
		</view>
		<view class="line">
					 <view class="shortLine"></view>
		</view>

		<!-- <view class="row b-b">
			<text class="tit">证件类型</text>
			<view class="input-text" @click="showIdTypePopup">
				{{ getIdTypeName() }}
			</view>
		</view> -->
		<uni-popup ref="idTypePopup" type="bottom">
			<view class="pop-con">
				<radio-group class="pop-con-item" @change="radioChange">
					<label v-for="item in sfzjOptions" :key="item.value" class="item">
						<radio :value="item.value" />
						<text class="item-label">{{ item.label }}</text>
					</label>
				</radio-group>
				<view class="confirm-btn" @click="closeIdTypePopup">
					确定
				</view>
			</view>
		</uni-popup>
		<view class="line">
					 <view class="shortLine"></view>
		</view>
		
		<view class="row b-b-c">
			<!-- <text class="tit">{{$t('contact.idCard')}}</text> -->
			<text class="tit">证件号码</text>
			<input class="input" type="text" v-model="personData.CardNo" placeholder="证件号码" placeholder-class="placeholder" />
		</view>
		
		<view class="row default-row">
			<text class="tit">{{$t('contact.setDefault')}}</text>
			<switch :checked="personData.IsDefault===1" color="#498FFF" @change="switchChange" />
		</view>
		<button class="add-btn" @click="confirm">{{$t('contact.save')}}</button>
	</view>
</template>

<script>
	import { addUsersContacts, updateUsersContacts } from '@/api/mall.js';
	import { mapState, mapMutations, mapActions } from 'vuex';
	import { sfzjOptions } from './config.js';

	export default {
		components:{
		},
		data() {
			return {
				title: '',
				sfzjOptions,
				pagePath:'',
				qqmapsdk:{},
				manageType: 'add',
				defaultRegionCode:[],
				personData: {
					Name: '',
					Mobile: '',
					CardNo: '',
					IdType: '',
					UserModel: '',
					IsDefault: 0
				},
				eventChannel: null
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.base.userInfo
			}),
		},
		onLoad(option){
			console.log('option',option, this.sfzjOptions)
			if(option.page){
				this.pagePath = 1
			}
			this.manageType = option.type;
			console.log(1)
			
			const eventChannel = this.getOpenerEventChannel();
			this.eventChannel = eventChannel;
			eventChannel.on('initData', (data) => {
				console.log('Received data from opener page:', data);
				this.title = data.title || '联系人';
				let barTitle = this.$t('contact.addRav') + this.title;
				if (option.type === 'edit') {
					this.personData = JSON.parse(option.data)
					barTitle = this.$t('contact.edit') + this.title;
				}
				uni.setNavigationBarTitle({ title: barTitle });
			});
		},
		methods: {
			showIdTypePopup() {
				this.$refs.idTypePopup.open();
			},
			closeIdTypePopup() {
				if (!this.personData.IdType) {
					uni.showToast({
						title: '请先选择证件类型',
						icon: 'none',
					});
					return;
				}
				this.$refs.idTypePopup.close();
			},
			radioChange(e) {
				this.personData.IdType = e.detail.value;
				this.personData.UserModel = this.getIdTypeName();
			},
			getIdTypeName() {
				let idTypeName = '';
				if (!this.personData.IdType) return idTypeName;
				const find = this.sfzjOptions.find(item => item.value === this.personData.IdType);
				return find.label;
			},
 			switchChange(e){
				this.personData.IsDefault = e.detail.value ? 1 : 0
			},
			//提交
			confirm(){
				let data = this.personData;
				if(!data.Name){
					this.$api.msg(this.$t('contact.enterContactNameContact'));
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.Mobile)){
					this.$api.msg(this.$t('contact.enterValidMobile'));
					return;
				}
				// if (!data.IdType) {
				// 	this.$api.msg('请选择证件类型');
				// 	return;
				// }
				if(!data.CardNo){
					// this.$api.msg(this.$t('contact.enterIdCard'));
					this.$api.msg('请输入证件号码');
					return;
				}
				// if (data.IdType === '01') {
					if(!(/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(data.CardNo))) {
						this.$api.msg(this.$t('contact.enterValidIdCard'));
						return
					}
				// }
				
				uni.showLoading({
					title: this.$t('contact.saving'),
					mask:true
				})
				
				// 根据当前模式选择API
				const apiMethod = this.manageType === 'edit' ? updateUsersContacts : addUsersContacts;
				const successMsg = this.manageType === 'edit' ? this.$t('contact.editContactSuccess') : this.$t('contact.addContactSuccess');
				
				// 提交数据
				apiMethod(data).then(res => {
					uni.hideLoading();
					uni.showToast({
						title: successMsg,
						icon: 'success',
						duration: 1500,
						success: () => {
							if (this.eventChannel) {
								this.eventChannel.emit('addPersonComplete', {
									success: true,
									data: data
								});
							}
							
							uni.$emit('updateUserList');
							
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1500);
						}
					});
				}).catch(err => {
					uni.hideLoading();
					this.$api.msg(err.msg || this.$t('contact.saveFailed'));
				});
			},
		}
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		min-height: 100vh;
		padding: 20rpx;
		.line{
			width: 100%;
			// margin-left: 5%;

			background-color: #f8f8f8;
			.shortLine{
				width: 90%;
				margin-left: 5%;
				height: 2rpx;
				background-color: #e9e9e9;
			}
		}
	}
    .b-b-b{
		border-radius: 10rpx 10rpx 0 0;
	}
	.b-b-c{
		border-radius: 0 0 10rpx 10rpx;
	}
	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30rpx;
		height: 110rpx;
		background: #fff;
		width: 100%;
		
		.tit{
			flex-shrink: 0;
			width: 160rpx;
			font-size: 30rpx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30rpx;
			color: $font-color-dark;
		}
		.input-text {
			height: 100%;
			flex: 1;
			font-size: 30rpx;
			color: $font-color-dark;
			display: flex;
			align-items: center;
		}
		.icon-dizhi{
			font-size: 36rpx;
			color: $font-color-light;
		}
	}
	.default-row{
		margin-top: 16rpx;
		border-radius: 10rpx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16rpx) scale(.9);
		}
	}
	.add-btn{
    margin-top: 20rpx;
    height: 86rpx;
    background: linear-gradient(135deg, #498FFF 0%, #3A7FE6 100%);
    color: #FFFFFF;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 44rpx;
    transition: all 0.3s ease;
    letter-spacing: 2rpx;

    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 8rpx rgba(73,143,255,0.2);
    }
	}

	.pop-con {
		background-color: #fff;
  		padding: 20rpx;
		&-item {
			display: flex;
			flex-direction: column;
			padding: 20rpx;
			border-bottom: 1rpx solid #eee;
			cursor: pointer;
			.item {
				height: 64rpx;
			}
			.item-label {
				margin-left: 24rpx;
			}
		}
		.confirm-btn {
			padding: 20rpx;
			text-align: center;
			color: #498FFF;
			cursor: pointer;
		}
	}
</style>
